<template>
    <div>
        <h3>{{viewData.viewTitle}}</h3>
        <div ref="echarts" class="fl echarts" :style="{width:'100%',height:viewData.viewHeight}"></div>
    </div>
</template>
<script>
import echarts from "echarts"
export default {
    props:{
        viewData:{
            viewTitle:String,
            viewHeight:Number
        }
    },
    data() {
        return {

        }
    },
    methods: {
        init(){
            var echartsNew = this.$echarts.init(this.$refs.echarts);
            echartsNew.clear();
            var xAxisData = [];
            var data1 = [];
            var data2 = [];
            var data3 = [];
            var data4 = [];

            for (var i = 0; i < 10; i++) {
                xAxisData.push('Class' + i);
                data1.push((Math.random() * 2).toFixed(2));
                data2.push((Math.random() * 5).toFixed(2));
                data3.push((Math.random() + 3).toFixed(2));
                data4.push(Math.random().toFixed(2));
            }
            var emphasisStyle = {
                itemStyle: {
                    shadowBlur: 10,
                    shadowColor: 'rgba(0,0,0,0.3)'
                }
            };
            var seriesData = {
                legend: {
                    data: ['bar', 'bar2', 'bar3', 'bar4'],
                    left: '10%'
                },
                tooltip: {},
                xAxis: {
                    data: xAxisData,
                    name: 'X轴',
                    axisLine: {onZero: true},
                    splitLine: {show: false},
                    splitArea: {show: false}
                },
                yAxis: {
                    name: 'Y轴',
                },
                grid: {
                    bottom: 100
                },
                series: [
                    {
                        name: 'bar',
                        type: 'bar',
                        stack: 'one',
                        emphasis: emphasisStyle,
                        data: data1
                    },
                    {
                        name: 'bar2',
                        type: 'bar',
                        stack: 'one',
                        emphasis: emphasisStyle,
                        data: data2
                    },
                    {
                        name: 'bar3',
                        type: 'bar',
                        stack: 'two',
                        emphasis: emphasisStyle,
                        data: data3
                    },
                    {
                        name: 'bar4',
                        type: 'bar',
                        stack: 'two',
                        emphasis: emphasisStyle,
                        data: data4
                    }
                ]
            };
            echartsNew.setOption(seriesData,true);
        }
    },
    mounted(){
        this.init();
    }
}
</script>